$control-kanban: (
  text-color: getCssVar(color, text, 0),
  font-size: getCssVar('font-size', 'regular'),
  font-weight: getCssVar('font-weight', 'bold'),
  hover-bg-color: getCssVar(color, fill, 0),
  selected-bg-color: getCssVar(color, fill, 0),
  group-header-height: 48px,
);

@include b(control-kanban) {
  @include set-component-css-var(control-kanban, $control-kanban);

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  @include when(enable-page) {
    .#{bem(control-kanban, content)} {
      height: calc(100% - 50px);
    }
  }

  @include e(drag-icon) {
    margin-right: getCssVar('spacing', 'tight');
    cursor: move;
    visibility: hidden;
  }

  @include e(content) {
    display: flex;
    flex-grow: 1;
  }

  @include m(row) {
    @include b(control-kanban-group-container) {
      @include flex(row);

      padding-bottom: getCssVar(spacing, tight);
      overflow: auto;

      & > * + * {
        margin-left: getCssVar(spacing, base);
      }
    }
    @include b(control-kanban-group) {
      @include when(collapse) {
        width: 32px;
        @include e(header) {
          position: relative;
          flex-direction: column;
          align-items: start;
          height: 100%;
          padding: getCssVar('spacing', 'none');

          ion-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        @include e(header-caption) {
          align-self: center;
          transform: rotate(90deg)
            translate(calc(100% / 2 - var(--ibiz-spacing-tight)), 0);
        }
      }
    }
  }

  @include m(column) {
    @include b(control-kanban-group-container) {
      @include flex(row);

      flex-direction: column;

      & > * + * {
        margin-top: getCssVar(spacing, base);
      }
    }

    @include b(control-kanban-group) {
      @include when(collapse) {
        width: 100%;

        ion-icon {
          transform: rotate(-90deg);
        }
      }
    }
  }

  .#{bem(control-kanban, default-item)},
  .#{bem(control-kanban, panel-item)} {
    flex-grow: 1;
  }
}

@include b(control-kanban-group-container) {
  flex: 1;
}

@include b(control-kanban-group) {
  @include flex(column);

  flex-shrink: 0;
  border: 1px solid getCssVar(color, border);
  border-radius: getCssVar(border, radius, small);
  transition: all 0.3s;
  @include e(header) {
    position: relative;
    height: getCssVar(control-kanban, group-header-height);
    padding: getCssVar('spacing', 'none') getCssVar(spacing, base);
    font-size: getCssVar(control-kanban, font-size);
    font-weight: getCssVar(control-kanban, font-weight);
    cursor: pointer;
    border-bottom: 1px solid getCssVar(color, border);
    @include flex(row, space-between, center);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      content: '';
      border-color: inherit;
      border-top: 2px solid;
    }
  }
  @include e(header-left) {
    @include flex(row, center, center);

    ion-icon {
      margin-right: getCssVar(spacing, tight);
      transition: transform 0.3s;
    }
  }
  @include e(header-caption) {
    padding: 0 getCssVar(spacing, tight);
    white-space: nowrap;
    @include when(badge) {
      color: getCssVar(color, primary, active, text);
    }
  }
  @include e(list) {
    position: relative;
    flex: auto;
    width: 100%;
    height: calc(100% - 48px);
    padding: getCssVar('spacing', 'none') getCssVar(spacing, tight);
    overflow: auto;

    &:hover {
      .#{bem(control-kanban, quicktoolbar)} {
        visibility: visible;
      }
    }

    @include e(draggable) {
      min-height: 100%;
      padding: getCssVar(spacing, base) 0;
    }
    @include when(empty) {
      display: flex;
      flex-direction: column;
      .#{bem(control-kanban-group, draggable)} {
        flex-shrink: 0;
        min-height: 0;
      }
      .#{bem(control-kanban, quicktoolbar)} {
        flex-grow: 1;
        width: calc(100% - getCssVar(spacing, base));
      }

      .#{bem(control-toolbar, item)} {
        justify-content: center;
      }
    }
  }
  @include e(header-actions) {
    position: relative;
    z-index: 100;
    width: 32px;
    height: 32px;
    padding: getCssVar(spacing, tight);
    margin-left: getCssVar('spacing', 'extra-tight');
    font-size: getCssVar(control-kanban, font-size);
    color: getCssVar(color, primary);
    cursor: pointer;
    border-radius: getCssVar('border', 'radius', 'circle');

    &:hover {
      background-color: getCssVar(color, fill, 0);
    }
  }
  @include e(actions-dropdown) {
    &:has(.el-button) {
      padding: getCssVar(spacing, extra, tight) getCssVar('spacing', 'none');
    }
    .#{bem(action-toolbar)} {
      @include flex(column);
    }

    .el-button {
      --el-button-size: #{getCssVar(height-control, large)};

      justify-content: flex-start;
      width: 100%;
      padding: getCssVar(spacing, tight) getCssVar(spacing, base);
      margin: getCssVar('spacing', 'none');
      font-size: getCssVar('font-size', 'regular');
      color: getCssVar(color, primary, text);

      ion-icon {
        margin-right: getCssVar(spacing, extra, tight);
      }
    }

    .el-button.is-text:not(.is-disabled) {
      &:hover {
        background-color: var(--el-button-hover-bg-color);
        border-color: var(--el-button-hover-border-color);
      }
    }
  }
}

@include b(control-kanban-item) {
  cursor: pointer;

  &:hover {
    background-color: getCssVar(control-kanban, hover-bg-color);
    .#{bem(control-kanban, drag-icon)} {
      visibility: visible;
    }
  }

  @include when(selected) {
    background-color: getCssVar(control-kanban, selected-bg-color);
  }

  @include when(disabled) {
    cursor: no-drop;
  }

  @include e(content) {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  @include e(bottom) {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: getCssVar('spacing', 'tight');
    margin-top: getCssVar('spacing', 'tight');
    border-top: 1px solid getCssVar('color', 'border');
    @include m(actions) {
      display: flex;
      justify-content: center;
      .#{bem(action-toolbar, item)} {
        margin: 0;
      }
      .#{bem(action-toolbar, item, label)} {
        &.is-has-caption {
          margin: 0;
        }
      }
    }
  }
}

.#{bem(control-kanban-item)} + .#{bem(control-kanban-item)} {
  margin-top: getCssVar(spacing, base);
}

@include b(control-kanban) {
  position: relative;

  @include e(popover) {
    >.el-scrollbar {
      overflow: visible;
    }
    .#{bem(action-toolbar, popover)} {
      background-color: getCssVar(color, primary) !important;
    }
  }

  @include e(quicktoolbar) {
    margin-bottom: getCssVar(spacing, base);
    visibility: hidden;
    @include flex(column);

    & > * + * {
      margin-top: getCssVar(spacing, tight);
    }
  }

  @include when(full) {
    padding: getCssVar(spacing, base);
    background-color: getCssVar(color, bg, 2);
  }
}

@include b(control-kanban-toolbar) {
  display: flex;
  flex-shrink: 0;
  gap: getCssVar(spacing, tight);

  .el-button {
    border: 1px solid getCssVar(color, border);
  }
}

@include b(control-kanban-batch) {
  padding: getCssVar(spacing, base, tight);
  border-bottom: 1px solid getCssVar(color, border);

  @include e(toolbar) {
    .#{bem(control-toolbar)} {
      flex-wrap: wrap;
      row-gap: getCssVar(spacing, tight);
    }
  }

  @include e(check) {
    @include flex(row, space-between, center);

    margin-top: getCssVar(spacing, base, tight);
    font-size: getCssVar('font-size', regular);
  }

  @include e(info) {
    span {
      margin: getCssVar('spacing', 'none') getCssVar(spacing, extra, tight);
      color: getCssVar(color, primary);
    }
  }
}
